<template>
    
    <Modal v-model="announcement" v-show="ifshow" :width='800' :closable="false" title="公告" :mask-closable="false">
        <mavon-editor ref="md" v-model="mdvalue" style="height: 400px;z-index:100"
		:xssOptions="xssList" :subfield="false" :boxShadow="false" 
		defaultOpen="preview" :toolbarsFlag="false"/>
        

        <template>
            <div class="qheader" :style="{borderBottom: ishidden ? '' : '1px solid rgb(210,210,210)',}">
                <p>附件</p>
            </div>
            <component ref="file" :is="'file'" :ifedit="isedit" :files="file"></component>
        </template>

        <Checkbox v-model="ifagree">已阅知，同意遵守以上管理办法规定</Checkbox>
        <div slot="footer" >
            <Button type="text"  @click="cancel()">取消</Button>
            <Button  type="primary" @click="ok()">确定</Button>
        </div>
    </Modal>
</template>
<script>
    import ajax from '../ajax_util'
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import Axios from 'axios'
    import process_build from '../comp_process/process_build'
    import file from './notice_file'
	var xss = require('xss');
	
    export default {
        name: "notice",
        components:{
            mavonEditor,process_build,file
        },
        data(){
            return {
				xssList: {
					whiteList: xss.whiteList
				},
                announcement: false,
                mdvalue: "",
                fileUrl:this.CONFIG.file_url,
                tabs:{},
                ifagree:false,
                ifshow:true,
                isedit:true,
                ishidden:false,
                file:[],
            }
        },
        mounted:function(){
            this.setmdvalue(this.serviceType)
            this.tabs = this.$store.state.tabs

        },
        methods: {
            setmdvalue(serviceType) {
                var url = this.CONFIG.base_url_test + '/notice/' + serviceType
                var that = this;
                ajax.get({
                    url: url,
                    that: that,
                    success: function(data) {
                        console.log('data', data)
                        if (data != undefined && data.length > 0 && data[data.length - 1].noticeContent != '') {

                            var matched_arr = data[data.length - 1].noticeContent.match(/\!\[.*?]\((.*?)\)/g);
                            var img_names = []
                            for (var i in matched_arr) {
                                img_names.push( /\!\[.*?]\((.*?)\)/g.exec(matched_arr[i])[1])
                            }
                            that.$nextTick(() => {
                                that.setfile(img_names)
                            })
                            
                            that.announcement = true
                            that.mdvalue = data[data.length - 1].noticeContent
                            that.file = data[data.length-1].files
                            console.log('that.$refs.file',that.$refs.file)
                        }
                    }
                })
            },

            setfile(img_file){
                console.log('img_file',img_file.length)
                var that=this
                if (img_file.length > 0) {
                    for (let index = 0; index < img_file.length; index++) {
                        var url = that.fileUrl + "/image/" + img_file[index]+".png";
                        Axios.get(url,{responseType: 'blob'
                        }).then(function(response){
                            var blob = new Blob([response.data])
                            var href = window.URL.createObjectURL(blob)
                            console.log('href', href)
                            that.$refs.md.$imgUpdateByUrl(img_file[index], href)
                            return href
                        }).catch(function (error) {
							if(error&&error.response){
								if(error.response.status==406){//forbiden
									that.$Notice.error({
									desc:  "访问文件不存在",
									duration: 5,
									});
								}else if(error.response.status==403){//forbiden
									that.$Notice.error({
										title: '请求拒绝',
										desc: '您没有当前操作权限',
									});
								}else{
									that.$Notice.error({
									title: '网络异常',
									desc:  '请联系管理员进行处理',
									});
								}
							}else if (error == 406){//forbiden
								that.$Notice.error({
									desc:  "访问文件不存在",
									duration: 5,
								});
							}else {
								that.$Notice.error({
									title: '网络异常',
									desc:  '请联系管理员进行处理',
								});
							}
						});
                    }
                }
            },

            removeTabPsge(name){
                console.log(this.tabs, name)
                var index = -1;
                this.tabs.list.some((item,i) =>{
                    if(item.tabKey === this.tabs.tabsPage){
                        index = i
                        return true
                    }
                })
                console.log(index)
                this.tabs.tabsPage = this.tabs.list[index-1].tabKey
                this.tabs.list.splice(index,1)
                this.$store.commit("tabs", this.tabs);
            },
            ok () {
                if(this.ifagree){
                    this.$Message.success('已关闭')
                    this.announcement = false
                }else{
                    this.$Message.error('请同意遵守以上管理办法规定')
                }
            },
            cancel () {
                this.removeTabPsge(this.serviceType)
            },
        },
        props: {
            ifedit: {},
            serviceType: {}
        },
        
    }
</script>
